<template>
	<view>
		<!-- 新增运力发布弹窗 -->
		<u-popup v-model="showPublishWindow" mode="bottom" :safeAreaInsetBottom="true" :maskCloseAble="true"
			:closeable="true" height="45%" :mask="true" @close="close">
			<view class="">
				<publish-order ref="addCar" @submit="submit" :driverName="name" :driverCode="driverCode" />
			</view>
		</u-popup>
		<!-- 导航栏顶部 -->
		<view class="nav">
			<u-navbar title-color="#fff" back-icon-color="#ffffff" :is-back="true" :background="background"
				:back-text-style="{color: '#fff'}" title="我的运力发布" back-text="返回">
				<view class="navbar-right" slot="right">
					<view class="dot-box right-item" @click="openPopup">
						运力发布
					</view>
				</view>
			</u-navbar>
		</view>
		<view class="wrap">
			<view class="u-tabs-box">
				<u-tabs-swiper activeColor="#f29100" ref="tabs" :list="list" :current="current" @change="change"
					:is-scroll="false" swiperWidth="750"></u-tabs-swiper>
			</view>
			<swiper class="swiper-box" :current="swiperCurrent" @transition="transition"
				@animationfinish="animationfinish">
				<swiper-item class="swiper-item">
					<!-- 正在找单 -->
					<scroll-view scroll-y style="height: 100%;width: 100%;" @scrolltolower="reachBottom">
						<view class="page-box">
							<view v-if="publishOrderList[0].length === 0" class="empty">
								<u-empty mode="data"></u-empty>
							</view>
							<publish-order-box v-for="item in publishOrderList[0]" :order="item"
								@deleteCar="deleteOrder" />
							<u-loadmore v-if="loadStatus[0] !=='loadmore'" :status="loadStatus[0]" bgColor="#f2f2f2" />
						</view>
					</scroll-view>
				</swiper-item>
				<swiper-item class="swiper-item">
					<!-- 已被接单 -->
					<scroll-view scroll-y style="height: 100%;width: 100%;" @scrolltolower="reachBottom">
						<view class="page-box">
							<view v-if="publishOrderList[1].length === 0" class="empty">
								<u-empty mode="data"></u-empty>
							</view>
							<publish-order-box v-for="item in publishOrderList[1]" :order="item"
								@finish="finish" />
							<u-loadmore v-if="loadStatus[1] !=='loadmore'" :status="loadStatus[1]" bgColor="#f2f2f2" />
						</view>
					</scroll-view>
				</swiper-item>
				<swiper-item class="swiper-item">
					<!-- 结束找单 -->
					<scroll-view scroll-y style="height: 100%;width: 100%;" @scrolltolower="reachBottom">
						<view class="page-box">
							<view v-if="publishOrderList[2].length === 0" class="empty">
								<u-empty mode="data"></u-empty>
							</view>
							<publish-order-box v-for="item in publishOrderList[2]" :order="item"
								@deleteCar="deleteOrder" />
							<u-loadmore v-if="loadStatus[2] !=='loadmore'" :status="loadStatus[1]" bgColor="#f2f2f2" />
						</view>
					</scroll-view>
				</swiper-item>
			</swiper>
		</view>
	</view>
</template>

<script>
	import {
		mapGetters
	} from 'vuex'
	import publishOrder from './componets/publishOrder.vue'
	import publishOrderBox from './componets/publishOrderBox.vue'
	export default {
		components: {
			publishOrder,
			publishOrderBox
		},
		data() {
			return {
				background: {
					backgroundColor: '#f8f8f8',

					// 导航栏背景图
					//background: 'url(https://cdn.uviewui.com/uview/swiper/1.jpg) no-repeat',
					// 还可以设置背景图size属性
					// backgroundSize: 'cover',

					// 渐变色
					backgroundImage: 'linear-gradient(45deg, rgb(28, 187, 180), rgb(141, 198, 63))'
				},
				list: [{
					name: '正在找单'
				}, {
					name: '已被接单'
				}, {
					name: '结束找单'
				}],
				tabs: [
					'正在找单',
					'已被接单',
					'结束找单'
				],
				current: 0, // tabs组件的current值，表示当前活动的tab选项
				swiperCurrent: 0, // swiper组件的current值，表示当前那个swiper-item是活动的
				page: 1,
				loadStatus: ['loadmore', 'loadmore', 'loadmore'],
			};
		},
		computed: {
			...mapGetters([
				'publishOrderList',
				'showPublishWindow',
				'type',
				'name',
				'driverCode',
				'phone'
			])
		},
		created() {
			this.getData(this.current);
		},
		// 监听用户下拉刷新
		onPullDownRefresh() {
			console.log('refresh');
			this.$store.dispatch('publishOrder/CLEARORDERLSIT')
			this.getData(this.current);
			setTimeout(function() {
				uni.stopPullDownRefresh();
			}, 1000);
		},
		methods: {
			// 监听页面卸载
			onUnload() {
				console.log('页面卸载');
				// 清空车辆信息
				this.$store.dispatch('publishOrder/CLEARORDERLSIT');
			},
			// 关闭弹窗事件
			close() {
				this.$store.dispatch('publishOrder/CHANGEWINDOW', false);
			},
			// 从这里打开popup是新增模式
			openPopup() {
				// 因为车辆管理的新增和运力发布的新增极其相似，所有就不另外写了
				this.$store.dispatch('vehicle/CHANGETYPE', 'add');
				this.$store.dispatch('publishOrder/CHANGEWINDOW', true);
				console.log(this.showPublishWindow);
			},
			// 想后端发起请求，获取数据
			getData(index) {
				if (index === '' || index === undefined) {
					return;
				}
				let needPage = this.publishOrderList[index].length / 4 + 1
				if(index !== 1) {
					let orderState = 0;
					if(index === 2) {
						orderState = 1
					}
					this.$store.dispatch('publishOrder/GETPUBLISHORDERLIST', {
						page: needPage,
						limit: 4,
						driverCode: this.driverCode,
						state: orderState
					}).then(res => {
						if (res.code !== 200) {
							uni.showToast({
								title: '没有更多了',
								icon: 'none',
								duration: 1500
							});
						}
					})
				}
				if(index === 1) {
					this.$store.dispatch('publishOrder/GETPUBLISHORDERFINISHEDLIST', {
						page: needPage,
						limit: 4,
						driverCode: this.driverCode,
						state: 3
					}).then(res => {
						if (res.code !== 200) {
							uni.showToast({
								title: '没有更多了',
								icon: 'none',
								duration: 1500
							});
						}
					})
				}
				this.loadStatus[index] = "loadmore"
			},
			// 保存信息
			submit(data) {
				if (this.type === 'add') {
					let temp = {
						driverCode: this.driverCode,
						driverTel: this.phone
					};
					this.$store.dispatch('publishOrder/SAVEPUBLISHORDER', Object.assign(data, temp)).then(res => {
						if (res.code === 200) {
							this.$store.dispatch('publishOrder/CHANGEWINDOW', false);
							uni.showToast({
								title: res.body,
								icon: 'success'
							});
							this.$store.dispatch('publishOrder/GETPUBLISHORDERLIST', {
								page: 1,
								limit: 4,
								driverCode: this.driverCode,
								state: 0
							}).then(res => {
								if (res.code !== 200) {
									uni.showToast({
										title: '没有更多了',
										icon: 'none',
										duration: 1500
									});
								}
							})
						} else {
							uni.showToast({
								title: '保存失败，请查看是否输入已存在运力订单',
								icon: 'none',
								duration: 2000
							});
						}
					})
				}
			},
			// 结束运输
			finish(id) {
				let temp = {
					id: id,
					state: 1
				}
				this.$store.dispatch('publishOrder/FINISHPUBLISHORDER',temp)
				.then(res => {
					console.log(res);
					if (res.code === 200) {
						uni.showToast({
							title: '您已结束运输！',
							icon: 'none',
							duration: 1500
						});
					}else {
						uni.showToast({
							title: '服务器异常',
							icon: 'none',
							duration: 1500
						});
					}
				})
				console.log('结束找单');
			},
			// 删除运力发布的记录
			deleteOrder(id) {
				let _self = this;
				uni.showModal({
					title: '提示',
					content: '确定删除这条发布记录吗？',
					success: function(res) {
						if (res.confirm) {
							console.log("点击确认");
							_self.$store.dispatch('publishOrder/DELETEORDER', '' + id)
								.then(res => {
									uni.showToast({
										title: res.body,
										icon: 'success'
									});
									_self.$store.dispatch('publishOrder/GETPUBLISHORDERLIST', {
										page: 1,
										limit: 4,
										driverCode: _self.driverCode,
										state: 0
									})
								})
						}
					}
				});
			},
			// 用户下拉到底事件
			reachBottom() {
				this.loadStatus = "loading"
				this.page++;
				setTimeout(() => {
					this.getData(this.name);
				}, 1000)
			},
			change(index) {
				console.log(index);
				this.$store.dispatch('publishOrder/CLEARORDERLSIT');
				this.swiperCurrent = index;
				this.getData(index);
			},
			transition({
				detail: {
					dx
				}
			}) {
				this.$refs.tabs.setDx(dx);
			},
			animationfinish({
				detail: {
					current
				}
			}) {
				this.$refs.tabs.setFinishCurrent(current);
				this.swiperCurrent = current;
				this.current = current;
			}
		}
	}
</script>
<style>
	/* #ifndef H5 */
	page {
		height: 100%;
		background-color: #f2f2f2;
	}

	/* #endif */
</style>

<style lang="scss">
	.navbar-right {
		margin-right: 24rpx;
		display: flex;

		.right-item {
			margin: 0 12rpx;
			position: relative;
			color: #eae3e5;
			font-size: 26rpx;
		}

	}

	.wrap {
		display: flex;
		flex-direction: column;
		height: calc(100vh - var(--window-top));
		width: 100%;

		.u-tabs-box {
			z-index: 900;
		}
	}

	.swiper-box {
		flex: 1;
	}

	.swiper-item {
		height: 100%;

		.page-box {
			display: flex;
			flex-direction: column;
			justify-items: center;

			.empty {
				margin: 50% auto;
			}
		}
	}
</style>
